<template>
  <div class="bg">
    <div class="loginForm">
      <h3>系统登录</h3>
      <a-form
        name="custom-validation"
        ref="formRef"
        :model="formState"
        :rules="rules"
        v-bind="layout"
        @finish="handleFinish"
        @finishFailed="handleFinishFailed"
      >
        <a-form-item has-feedback label="账号" name="userName">
          <a-input
            allowClear
            v-model:value="formState.userName"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item has-feedback label="密码" name="password">
          <a-input
            allowClear
            v-model:value="formState.password"
            type="password"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" html-type="submit">确定</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import JSEncrypt from "jsencrypt";
import http from "/src/utils/http.js";
import localforage from "localforage";
import { defineComponent, reactive, ref } from "vue";
export default {
  name: "user",
  setup() {
    const formRef = ref();
    const formState = reactive({
      password: "",
      userName: "",
    });

    let validatePass = async (rule, value) => {
      if (value === "") {
        return Promise.reject("请输入密码!");
      }
    };

    let validateUserName = async (rule, value) => {
      if (value === "") {
        return Promise.reject("请输入用户名!");
      }
    };
    const rules = {
      password: [
        {
          required: true,
          validator: validatePass,
          trigger: "change",
        },
      ],
      userName: [
        {
          required: true,
          validator: validateUserName,
          trigger: "change",
        },
      ],
    };
    const layout = {
      labelCol: {
        span: 7,
      },
      wrapperCol: {
        span: 17,
      },
    };
    const encryptor = ({ userName, password }) => {
      let encryptor = new JSEncrypt(); // 创建加密对象实例
      //之前ssl生成的公钥，复制的时候要小心不要有空格
      let pubKey = `-----BEGIN PUBLIC KEY-----
      MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCe8zGb4UAMg2A63pH+/W145hHv
      YQPJlkX6OfzJ1215htCI6Pyh2TdHRrDqVU6wP609ao9tLxRsbbXrajBGXiq2ijRX
      7AKrsVdhYi2J+B2q/CrsH5CDKa16YCVPPwf/oZDz/hxrcjZjhOoSIZupY3/xzOBT
      TjcVcvWbTxGw0wOm6wIDAQAB
      -----END PUBLIC KEY-----`;
      encryptor.setPublicKey(pubKey); //设置公钥
      return encryptor.encrypt(`${userName}.${password}`); // 对内容进行加密
    };
    const handleFinish = async (values) => {
      let token = encryptor(values);
      localforage.setItem("token", token);
      let res = await http.get("/v2/user/login");
      console.log(res);
    };

    const handleFinishFailed = (errors) => {
      console.log(errors);
    };

    const resetForm = () => {
      formRef.value.resetFields();
    };

    return {
      formState,
      formRef,
      rules,
      layout,
      handleFinishFailed,
      handleFinish,
      resetForm,
    };
  },
};
</script>

<style lang="less" scoped>
.bg {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  // animation: gradientBG 15s ease infinite;
  .loginForm {
    display: flex;
    border-radius: 4px;
    width: 400px;
    flex-direction: column;
    padding: 1.8vw 4vw 1vw 1vw;
    box-sizing: border-box;
    margin-right: 5vw;
    background: #fff;
    border: 1px solid #ccc;
    filter: drop-shadow(2px 3px 3px #999);
    > h3 {
      letter-spacing: 0.2px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }
  }
}
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
